<template>
  <div class="app-container">
    <div class="header">
      <h1>评论与社区管理系统</h1>
      <div class="stats">
        <div class="stat-card">
          <div class="value">{{ totalComments }}</div>
          <div class="label">总评论数</div>
        </div>
        <div class="stat-card">
          <div class="value">{{ totalUsers }}</div>
          <div class="label">活跃用户数</div>
        </div>
        <div class="stat-card">
          <div class="value">{{ totalLikes }}</div>
          <div class="label">总点赞数</div>
        </div>
      </div>
    </div>

    <div class="main-content">
      <div class="tabs">
        <el-tabs v-model="activeTab" type="card">
          <el-tab-pane label="评论列表管理" name="comments">
            <div class="operation-bar">
              <div class="search-area">
                <!-- 专业筛选下拉框 -->
                <el-select
                    v-model="commentFilters.majorId"
                    placeholder="按专业筛选"
                    clearable
                    style="width: 200px;"
                    @change="fetchComments"
                >
                  <el-option
                      v-for="major in majors"
                      :key="major.majorId"
                      :label="major.majorName"
                      :value="major.majorId"
                  />
                </el-select>

                <el-input
                    v-model="commentFilters.keyword"
                    placeholder="搜索评论内容"
                    clearable
                    @clear="fetchComments"
                    @keyup.enter="fetchComments"
                    style="width: 300px; margin-right: 10px;margin-top: -2px;"
                >
                  <template #prefix>
                    <el-icon><search /></el-icon>
                  </template>
                </el-input>

                <el-button type="primary" @click="fetchComments">搜索</el-button>
              </div>
            </div>

            <div class="table-container">
              <el-table
                  :data="comments"
                  border
                  stripe
                  style="width: 100%"
                  v-loading="loadingComments"
              >
                <el-table-column label="ID" prop="commentId" width="80" align="center" />

                <el-table-column label="题目内容" min-width="200">
                  <template #default="{ row }">
                    <div class="content-preview">{{ row.questionContent || '无题目内容' }}</div>
                  </template>
                </el-table-column>

                <el-table-column label="评论内容" min-width="250">
                  <template #default="{ row }">
                    <div class="content-preview">{{ row.content }}</div>
                  </template>
                </el-table-column>

                <el-table-column label="评论者" min-width="180">
                  <template #default="{ row }">
                    <div class="user-info">
<!--                      <div class="user-avatar">{{ row.username.charAt(0).toUpperCase() }}</div>-->
                      <div class="user-details">
                        <div>{{ row.username }}</div>
                        <div class="user-email">{{ row.email }}</div>
                      </div>
<!--                      <el-tag v-if="row.professional" type="success" size="small" class="professional-tag">-->
<!--                        {{ row.professional }}-->
<!--                      </el-tag>-->
                    </div>
                  </template>
                </el-table-column>

                <el-table-column label="专业" width="150" align="center">
                  <template #default="{ row }">
                    <div>
                      <el-tag v-if="row.questionMajorName" type="success" size="small">
                        {{ row.questionMajorName }}
                      </el-tag>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column label="评论时间" width="180">
                  <template #default="{ row }">
                    {{ formatDate(row.createdAt) }}
                  </template>
                </el-table-column>

                <el-table-column label="点赞数" width="100" align="center">
                  <template #default="{ row }">
                    {{ row.likeCount }}
                  </template>
                </el-table-column>

                <el-table-column label="操作" width="180" align="center">
                  <template #default="{ row }">
                    <el-button
                        type="primary"
                        size="small"
                        @click="showLikeUsers(row)"
                    >查看点赞</el-button>
                    <el-button
                        type="danger"
                        size="small"
                        @click="deleteComment(row.commentId)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <div class="pagination-container">
              <el-pagination
                  v-model:current-page="commentPagination.currentPage"
                  v-model:page-size="commentPagination.pageSize"
                  :total="commentPagination.total"
                  :page-sizes="[10, 20, 50]"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="fetchComments"
                  @current-change="fetchComments"
              />
            </div>

            <div class="chart-container">
              <div class="chart-card">
                <div class="chart-header">
                  <div class="chart-title">专业评论分布</div>
                  <div class="chart-actions">
                    <el-button size="small">导出</el-button>
                  </div>
                </div>
                <canvas ref="majorChart"></canvas>
              </div>

              <div class="chart-card">
                <div class="chart-header">
                  <div class="chart-title">高频评论题目排行</div>
                  <div class="chart-actions">
                    <el-select v-model="hotQuestionLimit" size="small" style="width: 100px;">
                      <el-option label="前5名" :value="5" />
                      <el-option label="前10名" :value="10" />
                      <el-option label="前20名" :value="20" />
                    </el-select>
                  </div>
                </div>
                <div style="height: 280px; overflow-y: auto;">
                  <div v-for="(question, index) in hotQuestions" :key="question.questionId" class="hot-question">
                    <div class="rank-badge" :class="{'top-1': index === 0, 'top-2': index === 1, 'top-3': index === 2}">
                      {{ index + 1 }}
                    </div>
                    <div class="question-content content-preview">
                      {{ question.content }}
                    </div>
                    <div class="comment-count">
                      {{ question.commentCount }} 条
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="用户评论行为" name="userStats">
            <div class="operation-bar">
              <div class="search-area">
                <el-input
                    v-model="userFilters.keyword"
                    placeholder="搜索用户名/邮箱"
                    clearable
                    @clear="fetchUserStats"
                    @keyup.enter="fetchUserStats"
                    style="width: 300px; margin-right: 10px;margin-top: -2px;"
                >
                  <template #prefix>
                    <el-icon><search /></el-icon>
                  </template>
                </el-input>
<!--                <el-select-->
<!--                    v-model="userFilters.majorId"-->
<!--                    placeholder="按专业筛选"-->
<!--                    clearable-->
<!--                    style="width: 200px;"-->
<!--                    @change="fetchUserStats"-->
<!--                >-->
<!--                  <el-option-->
<!--                      v-for="major in majors"-->
<!--                      :key="major.majorId"-->
<!--                      :label="major.majorName"-->
<!--                      :value="major.majorId"-->
<!--                  />-->
<!--                </el-select>-->
                <el-button type="primary" @click="fetchUserStats">搜索</el-button>
              </div>
            </div>

            <div class="table-container">
              <el-table
                  :data="userStats"
                  border
                  stripe
                  style="width: 100%"
                  v-loading="loadingUserStats"
              >
                <el-table-column label="用户ID" prop="userId" width="100" align="center" />

                <el-table-column label="用户信息" min-width="220">
                  <template #default="{ row }">
                    <div class="user-info">
                      <div class="user-avatar">{{ row.username.charAt(0).toUpperCase() }}</div>
                      <div class="user-details">
                        <div>{{ row.username }}</div>
                        <div class="user-email">{{ row.email }}</div>
                      </div>
<!--                      <el-tag v-if="row.professional" type="success" size="small" class="professional-tag">-->
<!--                        {{ row.professional }}-->
<!--                      </el-tag>-->
                    </div>
                  </template>
                </el-table-column>

                <!-- 用户专业列（显示用户自己的专业） -->
                <el-table-column label="用户专业" width="150" align="center">
                  <template #default="{ row }">
                    <div>
                      <el-tag v-if="row.professional" type="info" size="small">
                        {{ row.professional }}
                      </el-tag>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column label="评论数" prop="commentCount" width="120" align="center" sortable>
                  <template #default="{ row }">
                    <el-tag type="primary">{{ row.commentCount }}</el-tag>
                  </template>
                </el-table-column>

                <el-table-column label="收到点赞" prop="receivedLikes" width="120" align="center" sortable>
                  <template #default="{ row }">
                    <el-tag type="success">{{ row.receivedLikes }}</el-tag>
                  </template>
                </el-table-column>

                <el-table-column label="评论活跃度" min-width="180" align="center">
                  <template #default="{ row }">
                    <el-progress
                        :percentage="calculateActivity(row.commentCount)"
                        :color="customColors"
                        :show-text="false"
                    />
                    <div style="font-size: 12px; margin-top: 5px;">
                      {{ getActivityLevel(row.commentCount) }}
                    </div>
                  </template>
                </el-table-column>

                <el-table-column label="操作" width="120" align="center">
                  <template #default="{ row }">
                    <el-button
                        type="primary"
                        size="small"
                        @click="viewUserComments(row.userId)"
                    >详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <div class="pagination-container">
              <el-pagination
                  v-model:current-page="userPagination.currentPage"
                  v-model:page-size="userPagination.pageSize"
                  :total="userPagination.total"
                  :page-sizes="[10, 20, 50]"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="fetchUserStats"
                  @current-change="fetchUserStats"
              />
            </div>

            <div class="chart-container">
              <div class="chart-card">
                <div class="chart-header">
                  <div class="chart-title">用户评论数分布</div>
                  <div class="chart-actions">
                    <el-button size="small">导出</el-button>
                  </div>
                </div>
                <canvas ref="userCommentChart"></canvas>
              </div>

              <div class="chart-card">
                <div class="chart-header">
                  <div class="chart-title">专业用户活跃度</div>
                  <div class="chart-actions">
                    <el-button size="small">导出</el-button>
                  </div>
                </div>
                <canvas ref="majorActivityChart"></canvas>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>

  <!-- 点赞用户对话框 -->
  <el-dialog
      v-model="likeUsersDialogVisible"
      title="点赞用户列表"
      width="600px"
      class="like-users-dialog"
  >
    <div v-if="currentComment">
      <div style="margin-bottom: 20px;">
        <p><strong>评论内容：</strong>{{ currentComment.content }}</p>
        <p><strong>关联题目：</strong>{{ currentComment.questionContent }}</p>
      </div>

      <el-divider />

      <div v-if="likeUsers.length > 0">
        <div v-for="user in likeUsers" :key="user.userId" class="like-user-item">
          <div class="like-user-avatar">{{ user.username.charAt(0).toUpperCase() }}</div>
          <div>
            <div><strong>{{ user.username }}</strong></div>
            <div style="font-size: 12px; color: #909399;">
              {{ user.email }}
              <el-tag v-if="user.professional" type="info" size="small">
                {{ user.professional }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>
      <div v-else style="text-align: center; padding: 20px; color: #909399;">
        暂无点赞用户
      </div>
    </div>

    <template #footer>
      <el-button @click="likeUsersDialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick, onUnmounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search } from '@element-plus/icons-vue';
import axios from '@/api/server';
import Chart from 'chart.js/auto';

// 状态数据
const activeTab = ref('comments');
const totalComments = ref(0);
const totalUsers = ref(0);
const totalLikes = ref(0);

// 专业数据
const majors = ref([]);

// 评论管理相关
const comments = ref([]);
const loadingComments = ref(false);
const commentFilters = reactive({
  keyword: '',
  majorId: null
});
const commentPagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

// 用户行为统计相关
const userStats = ref([]);
const loadingUserStats = ref(false);
const userFilters = reactive({
  keyword: '',
  majorId: null
});
const userPagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

const activityLevels = reactive({
  high: 50,
  medium: 30,
  low: 10
});

// 高频评论题目
const hotQuestions = ref([]);
const hotQuestionLimit = ref(10);

// 点赞用户相关
const likeUsersDialogVisible = ref(false);
const currentComment = ref(null);
const likeUsers = ref([]);

// 图表实例
let majorChartInstance = null;
let userCommentChartInstance = null;
let majorActivityChartInstance = null;

// 自定义进度条颜色
const customColors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 }
];

// 日期格式化
const formatDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toLocaleString();
};

// 计算用户活跃度
const calculateActivity = (commentCount) => {
  if (commentCount >= activityLevels.high) return 100;
  if (commentCount >= activityLevels.medium) return 80;
  if (commentCount >= activityLevels.low) return 40;
  return 20;
};

// 获取活跃度等级
const getActivityLevel = (commentCount) => {
  if (commentCount >= 50) return '极高活跃度';
  if (commentCount >= 30) return '高活跃度';
  if (commentCount >= 20) return '中等活跃度';
  if (commentCount >= 10) return '一般活跃度';
  if (commentCount >= 5) return '低活跃度';
  return '极少评论';
};

// 获取专业数据
const fetchMajors = async () => {
  try {
    const response = await axios.get('/admin/manage/comments/major-distribution');
    majors.value = response.data.data.map(item => ({
      majorId: item.majorId,
      majorName: item.majorName
    }));
  } catch (error) {
    console.error('获取专业数据失败:', error);
    ElMessage.error('获取专业数据失败');
  }
};

// 获取专业分布数据
const fetchMajorDistribution = async () => {
  try {
    const response = await axios.get('/admin/manage/comments/major-distribution');
    const data = response.data.data;
    initMajorChart(data);
    return data;
  } catch (error) {
    ElMessage.error('获取专业分布数据失败');
    return [];
  }
};

// 获取评论统计数据
const fetchCommentStats = async () => {
  try {
    const response = await axios.get('/admin/manage/comments/stats');
    const stats = response.data.data;
    totalComments.value = stats.totalComments || 0;
    totalUsers.value = stats.activeUsers || 0;
    totalLikes.value = stats.totalLikes || 0;
    return stats;
  } catch (error) {
    ElMessage.error('获取评论统计数据失败');
    return {};
  }
};

// 获取评论列表
const fetchComments = async () => {
  try {
    loadingComments.value = true;
    const params = {
      pageNum: commentPagination.currentPage,
      pageSize: commentPagination.pageSize,
      keyword: commentFilters.keyword,
      majorId: commentFilters.majorId
    };

    const response = await axios.get('/admin/manage/comments/page', { params });
    const data = response.data.data;

    // 修复这里：list -> records
    comments.value = data.records || [];
    commentPagination.total = data.total || 0;
  } catch (error) {
    ElMessage.error('获取评论数据失败');
  } finally {
    loadingComments.value = false;
  }
};

// 获取高频题目
const fetchHotQuestions = async () => {
  try {
    const response = await axios.get('/admin/manage/comments/hot-questions', {
      params: { limit: hotQuestionLimit.value }
    });
    hotQuestions.value = response.data.data || [];
  } catch (error) {
    ElMessage.error('获取高频题目失败');
  }
};

// 获取用户行为统计
const fetchUserStats = async () => {
  try {
    loadingUserStats.value = true;
    const params = {
      pageNum: userPagination.currentPage,
      pageSize: userPagination.pageSize,
      keyword: userFilters.keyword,
      majorId: userFilters.majorId
    };

    const response = await axios.get('/admin/manage/comments/user-stats/page', { params });
    const data = response.data.data;

    // 修复这里：list -> records
    userStats.value = data.records || [];
    userPagination.total = data.total || 0;
  } catch (error) {
    ElMessage.error('获取用户统计失败');
  } finally {
    loadingUserStats.value = false;
  }
};

// 获取点赞用户
const showLikeUsers = async (comment) => {
  try {
    currentComment.value = comment;
    const response = await axios.get(`/admin/manage/comments/${comment.commentId}/likes`);
    likeUsers.value = response.data.data || [];
    likeUsersDialogVisible.value = true;
  } catch (error) {
    ElMessage.error('获取点赞用户失败');
  }
};

// 删除评论
const deleteComment = async (commentId) => {
  try {
    await ElMessageBox.confirm('确定删除该评论吗？此操作不可撤销。', '警告', {
      confirmButtonText: '确定删除',
      cancelButtonText: '取消',
      type: 'warning',
      center: true
    });

    await axios.delete(`/admin/manage/comments/${commentId}`);
    ElMessage.success('评论删除成功');
    fetchComments();
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除评论失败');
    }
  }
};

// 查看用户评论
const viewUserComments = (userId) => {
  ElMessage.info(`查看用户 ${userId} 的评论`);
  // TODO: 实际应用中跳转到用户评论详情页
};

// 请求拦截器
axios.interceptors.request.use(config => {
  console.log('请求URL:', config.url)
  return config
})

// 响应拦截器
axios.interceptors.response.use(response => {
  console.log('响应数据:', response)
  return response
}, error => {
  console.error('请求错误:', error)
  return Promise.reject(error)
})

const majorChart = ref(null);
const userCommentChart = ref(null);
const majorActivityChart = ref(null);
// 初始化专业分布饼图
const initMajorChart = (data) => {
  if (majorChartInstance) {
    majorChartInstance.destroy();
  }

  const ctx = majorChart.value.getContext('2d');

  majorChartInstance = new Chart(ctx, {
    type: 'pie',
    data: {
      labels: data.map(item => item.majorName),
      datasets: [{
        data: data.map(item => item.count),
        backgroundColor: [
          '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0',
          '#9966FF', '#FF9F40', '#8AC926', '#1982C4',
          '#7EB3FF', '#FF9EB5', '#9CFF9C', '#FFD966'
        ],
        borderWidth: 1
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          position: 'right',
          labels: {
            font: {
              size: 12
            }
          }
        },
        title: {
          display: true,
          text: '专业评论分布',
          font: {
            size: 16
          }
        }
      }
    }
  });
};

// 初始化用户评论分布图
const initUserCommentChart = (data) => {
  if (userCommentChartInstance) {
    userCommentChartInstance.destroy();
  }

  const ctx = userCommentChart.value.getContext('2d');

  // 按评论数排序取前10
  const sortedData = [...data].sort((a, b) => b.commentCount - a.commentCount).slice(0, 10);

  userCommentChartInstance = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: sortedData.map(item => item.username),
      datasets: [{
        label: '评论数量',
        data: sortedData.map(item => item.commentCount),
        backgroundColor: '#3498db',
        borderColor: '#2980b9',
        borderWidth: 1
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: {
          beginAtZero: true,
          title: {
            display: true,
            text: '评论数量'
          }
        },
        x: {
          title: {
            display: true,
            text: '用户名'
          }
        }
      },
      plugins: {
        title: {
          display: true,
          text: '用户评论数分布',
          font: {
            size: 16
          }
        }
      }
    }
  });
};

// 初始化专业活跃度图表
const initMajorActivityChart = async () => {
  // if (majorActivityChartInstance) {
  //   majorActivityChartInstance.destroy();
  // }

  try {
    const response = await axios.get('/admin/manage/comments/major-activity');
    const data = response.data.data;

    // 过滤掉平均评论数为0的专业
    const filteredData = data.filter(item => item.avgComments > 0);

    // 按平均评论数排序
    filteredData.sort((a, b) => b.avgComments - a.avgComments);

    const ctx = majorActivityChart.value.getContext('2d');

    majorActivityChartInstance = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: data.map(item => item.majorName),
        datasets: [{
          label: '平均评论数',
          data: data.map(item => item.avgComments),
          backgroundColor: '#2ecc71',
          borderColor: '#27ae60',
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          y: {
            beginAtZero: true,
            title: {
              display: true,
              text: '平均评论数'
            }
          },
          x: {
            title: {
              display: true,
              text: '专业'
            }
          }
        },
        plugins: {
          title: {
            display: true,
            text: '专业用户活跃度',
            font: {
              size: 16
            }
          }
        }
      }
    });
  } catch (error) {
    console.error('获取专业活跃度数据失败:', error);
  }
};

// 初始化图表
const initCharts = async () => {
  try {
    const majorData = await fetchMajorDistribution();
    await nextTick(); // 确保DOM已渲染

    if (majorChart.value) initMajorChart(majorData);
    await fetchUserStats();
    if (userCommentChart.value) initUserCommentChart(userStats.value);
    if (majorActivityChart.value) await initMajorActivityChart();
  } catch (error) {
    console.error('图表初始化失败:', error);
  }
};

// 初始化数据
onMounted(async () => {
  await fetchMajors();
  await fetchCommentStats();
  await fetchComments();
  await fetchHotQuestions();

  // 延迟确保DOM渲染完成
  nextTick(async () => {
    // 添加安全判断
    if (majorChart.value) {
      await initCharts();
    }
  });
});

onUnmounted(() => {
  if (majorChartInstance) majorChartInstance.destroy();
  if (userCommentChartInstance) userCommentChartInstance.destroy();
  if (majorActivityChartInstance) majorActivityChartInstance.destroy();
});

const handleResize = () => {
  if (majorChartInstance) majorChartInstance.resize();
  if (userCommentChartInstance) userCommentChartInstance.resize();
  if (majorActivityChartInstance) majorActivityChartInstance.resize();
};

onMounted(() => {
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

</script>

<style scoped>
/* 样式优化 */
.app-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid #e6e6e6;
  margin-bottom: 30px;
}

.stats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.stat-card {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  min-width: 200px;
  text-align: center;
  color: white;
}

.stat-card .value {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
}

.stat-card .label {
  font-size: 14px;
  opacity: 0.9;
}

.chart-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 20px;
  height: 380px;
  display: flex;
  flex-direction: column;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.chart-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 25px;
  margin-top: 25px;
}

.operation-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #f8fafc;
  border-radius: 8px;
  margin-bottom: 20px;
}

.search-area {
  display: flex;
  gap: 15px;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3498db, #2c3e50);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
}

.hot-question {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  transition: all 0.3s ease;
}

.hot-question:hover {
  background-color: #f9f9f9;
  transform: translateX(5px);
}

.rank-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 15px;
  flex-shrink: 0;
}

.top-1 {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  box-shadow: 0 4px 10px rgba(255, 165, 0, 0.3);
}

.top-2 {
  background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
  box-shadow: 0 4px 10px rgba(160, 160, 160, 0.3);
}

.top-3 {
  background: linear-gradient(135deg, #CD7F32, #A56A2B);
  box-shadow: 0 4px 10px rgba(165, 106, 43, 0.3);
}

.question-content {
  flex-grow: 1;
  font-size: 15px;
  line-height: 1.5;
}

.comment-count {
  min-width: 80px;
  text-align: right;
  font-weight: bold;
  color: #3498db;
  font-size: 16px;
}

.like-user-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  transition: all 0.2s;
}

.like-user-item:hover {
  background-color: #f8f9fa;
}

.like-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 15px;
  flex-shrink: 0;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .chart-container {
    grid-template-columns: 1fr;
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .operation-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .search-area {
    width: 100%;
    flex-wrap: wrap;
  }

  .stat-card {
    min-width: calc(50% - 10px);
  }
}

@media (max-width: 480px) {
  .stat-card {
    min-width: 100%;
  }
}
</style>